<template>
  <div class="app-container">

    <u-page title="订单管理">

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="订单号" prop="orderNo">
            <el-input v-model="listQuery.orderNo" placeholder="请输入订单号" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="卡号" prop="memberId">
            <el-input v-model="listQuery.memberId" placeholder="会员卡号" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="门店" prop="channel">
            <el-input v-model="listQuery.channel" placeholder="门店" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="设备号" prop="sn">
            <el-input v-model="listQuery.sn" placeholder="设备号" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="交易状态" prop="status">
            <el-select v-model="listQuery.status" placeholder="请选择交易状态" class="status" clearable>
              <el-option label="全部" value="" />
              <el-option label="已关闭" :value="-1" />
              <el-option label="待付款" :value="0" />
              <el-option label="已完成" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="交易时间">
            <u-date-time-picker v-model="searchDate" value-format="yyyy-MM-dd HH:mm:ss" @change="changeSearchDate" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
            <el-button type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        index="index"
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right" width="200">
            <template slot-scope="{ row }">
              <el-button type="text" @click="hdlEdit(row)">交易记录</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>

    <!-- 订单信息 -->
    <u-dialog title="订单详情" :show.sync="dialogFormVisible" :footer="false" @confirm="hdlUpdate()">
      <el-form ref="dialogForm" :rules="rules" :model="dataForm" label-position="top" label-width="80px">

        <el-descriptions :column="2" border style="margin-bottom: 10px">
          <el-descriptions-item label="订单号">{{ dataForm.orderNo }}</el-descriptions-item>

          <el-descriptions-item label="交易时间">{{ dataForm.createTime }}</el-descriptions-item>

          <el-descriptions-item label="交易状态">
            <el-tag v-if="dataForm.status === -1" type="info">已关闭</el-tag>
            <el-tag v-if="dataForm.status === 0" type="danger">待付款</el-tag>
            <el-tag v-if="dataForm.status === 3" type="success">已完成</el-tag>
            <el-tag v-if="dataForm.status === 4" type="success">已退款</el-tag>
            <el-tag v-if="dataForm.status === 5" type="danger">退款失败</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="设备号"> {{ dataForm.sn }}</el-descriptions-item>

          <el-descriptions-item label="门店"> {{ dataForm.channel }}</el-descriptions-item>

          <el-descriptions-item label="积分抵扣/元">
            <el-tag type="success">{{ $u.amount.F2Y(dataForm.creditFee) }}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="流水号">
            <div v-if="dataForm.tradeNo">
              <el-tag>{{ dataForm.tradeNo }}</el-tag>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label="支付时间">
            <div v-if="dataForm.payTime">
              <el-tag type="success">{{ dataForm.payTime }}</el-tag>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label="卡号">
            {{ dataForm.memberId }}
          </el-descriptions-item>

          <el-descriptions-item label="OPENID">
            {{ dataForm.openid }}
          </el-descriptions-item>

          <el-descriptions-item label="备注" :span="2">{{ dataForm.note }}</el-descriptions-item>

        </el-descriptions>

      </el-form>
    </u-dialog>

  </div>
</template>
<script>

export default {
  components: { },
  data() {
    return {
      api: this.$u.api.PluginsJiedianOrder,
      list: [],
      listLoading: false,
      listOptions: {
        index: true,
        mutiSelect: true,
        stripe: true
      },
      listQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 1,
        beginTime: '',
        endTime: '',
        orderNo: '',
        tradeNo: '',
        status: '',
        sn: ''
      },
      inputDateRange: [],
      // 表格
      columns: [
        {
          prop: 'createTime',
          label: '交易时间',
          width: '150',
          render: (h, params) => {
            const { createTime } = params.row
            if (createTime) {
              return h('el-tag', createTime)
            }
          }
        },
        {
          prop: 'orderNo',
          label: '订单号',
          width: '200',
          render: (h, params) => {
            return h('el-tag', params.row.orderNo)
          }
        },
        {
          prop: 'memberId',
          label: '卡号',
          width: '166',
          render: (h, params) => {
            return h('el-tag', params.row.memberId)
          }
        },
        {
          prop: 'openid',
          label: 'OPENID',
          width: '230',
          render: (h, params) => {
            return h('el-tag', params.row.openid)
          }
        },
        {
          prop: 'sn',
          label: '设备号',
          render: (h, params) => {
            return h('el-tag', params.row.sn)
          }
        },
        {
          prop: 'channel',
          label: '门店',
          render: (h, params) => {
            if (params.row.channel) {
              return h('el-tag', params.row.channel)
            }
          }
        },
        {
          prop: 'tradeNo',
          label: '流水号',
          width: '240',
          render: (h, params) => {
            if (params.row.tradeNo) {
              return h('el-tag', params.row.tradeNo)
            }
          }
        },
        {
          prop: 'payTime',
          label: '支付时间',
          width: '150',
          render: (h, params) => {
            const { payTime } = params.row
            if (payTime) {
              return h('el-tag', payTime)
            }
          }
        },
        {
          prop: 'creditFee',
          label: '积分抵扣/元',
          width: '100',
          render: (h, params) => {
            const { creditFee } = params.row
            return h('el-tag', { props: { type: 'success' }}, this.$u.amount.F2Y(creditFee))
          }
        },
        {
          prop: 'status',
          label: '交易状态',
          width: '100',
          render: (h, params) => {
            const { status } = params.row
            let title = '待付款'
            let type = 'warning'
            if (status === -1) {
              title = '已关闭'
              type = 'info'
            } else if (status === 3) {
              title = '已完成'
              type = 'success'
            }
            return h('el-tag', { props: { type }}, title)
          }
        },
        {
          prop: 'note',
          label: '备注'
        }
      ],

      dialogFormVisible: false,
      dialogStatus: '',

      dataForm: {},
      rules: {
        note: [
          { required: true, message: '请输入备注信息', trigger: ['blur'] }
        ]
      }
    }
  },
  created() {
    this.hdlList()
  },
  methods: {
    // 导出数据
    handleDownload() {
      // 复制值
      const list = this.$u.deepClone(this.list)
      // 业务数据处理
      list.forEach(item => {
        this.$set(item, 'status', item.status === 0 ? '待付款' : item.status === 1 ? '已关闭' : item.status === 3 ? '已完成' : '')
        this.$set(item, 'creditFee', item.totalFee ? this.$u.amount.F2Y(item.totalFee) : '')
      })
      // 表头&表数据
      const tHeader = ['交易时间', '订单号', '交易流水号', '会员卡号', 'openid', '设备号', '门店', '实付金额', '支付时间', '订单状态', '订单备注']
      const filterVal = ['createTime', 'orderNo', 'tradeNo', 'memberId', 'openid', 'sn', 'channel', 'creditFee', 'payTime', 'status', 'note']
      const data = list.map(v => filterVal.map(j => { return v[j] }))
      this.$u.exports.excel('街电订单记录', tHeader, data)
    }
  }
}
</script>
<style lang="scss" scoped>

.app-container{
  ::v-deep {
    .filter {
      border: 0;
    }

    .code .el-textarea.is-disabled .el-textarea__inner {
      background-color: #060606 !important;
      color: #c6c6c6 !important;
    }

    .ack .el-input{
      width: 120px;
    }
  }
}
.orderinfo{
  width: 100%;
  display: flex;
  border: 1px solid #dfe6ec;
}

.goodinfolist{
  width: 70%;
  border-right:2px solid #dfe6ec ;
}
.goodinfotitle{
  padding: 5px;
  text-align: center;
  display: flex;
  width: 100%;
  background-color: #d5dbe7;
}
.goodinfotitle span {
  width:25%;
}
.goodinfo{
  padding: 5px;
  text-align: center;
  display: flex;
  height: 30px;
}
.goodinfo div{
  padding: 2px;
  width:20%;
  border-bottom: 1px solid #dfe6ec;
}
.payinfolist{
  width: 30%;
}
.payinfotitle{
  padding: 5px;
  text-align: center;
  display: flex;
  width: 100%;
  background-color: #d5dbe7;
}
.payinfotitle span {
  width:50%;
}
.payinfo{
  padding: 5px;
  text-align: center;
  display: flex;
  height: 30px;
}
.payinfo div{
  padding: 2px;
  width:50%;
  border-bottom: 1px solid #dfe6ec;
}

</style>
